<template>
  <div>
    <!--$attrs接收父组件传递过来的所有数据-->
    <el-menu
        :default-active="defaultActive"
        :router="router"
        v-bind="$attrs"
        class="el-menu-vertical-demo"
    >
      <template v-for="(item,index) in data" :key="index">
        <!--第一种情况：没有子菜单-->
        <!--空数组的话也算没有子菜单-->
        <el-menu-item
            v-if="!item.children || !item.children.length"
            :index="item.index"
        >
          <component v-if="item.icon" :is="`el-icon-${toLine(item.icon)}`"></component>
          <span>{{ item.name }}</span>
        </el-menu-item>
        <!--第二种情况：有子菜单-->
        <el-sub-menu
            v-if="item.children && item.children.length"
            :index="item.index"
        >
          <!--子级菜单名称-->
          <template #title>
            <component v-if="item.icon" :is="`el-icon-${toLine(item.icon)}`"></component>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
              v-for="(item1,index1) in item.children"
              :key="index1"
          >
            <component v-if="item1.icon" :is="`el-icon-${toLine(item1.icon)}`"></component>
            <span>{{ item1.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script lang='ts' setup>
import {PropType} from "vue";
import {MenuItem} from './types'
import {toLine} from "../../../utils"

let props = defineProps({
  data: {
    type: Array as PropType<MenuItem[]>,
    required: true
  },
  // 默认选中菜单
  defaultActive: {
    type: String,
    default: ''
  },
  //是否是路由模式
  router: {
    type: Boolean,
    default: false
  }
})
console.log('props.data', props.data)
</script>

<style lang='scss' scoped>
.el-menu {
  width: 300px;
}

svg {
  margin-right: 5px;
  width: 1em;
  height: 1em;
}

.el-menu-vertical-demo:not(.el-menu-coolapse){
  width: 200px;
}
</style>
